<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Icon 图标（Ant拓展）</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
</head>
<style type="text/css">
	.aut-icon{
		height: 2em;
		width: 2em;
		/* color: red; */
	}
	.ant-modal-confirm-body>.ant-modal-confirm-title{
		flex: auto !important;
		margin-left: 8px;
	}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">Ant的部分图标（Ant的图标3.X版本估计能直接调用出来，但4.X版本的经过尝试，没办法直接调。但还是可以从官方文档中抽取数据出来）</p>
	<p class="desc">后续经过研究，可以使用4.X版本的icon。就是通过Element的用法改造的，参照base/icon_ant1.html</p>
	<p class="desc">线框风格：</p>
	<svg viewBox="0 0 1024 1024" width="80" height="20"><path :d="obj_icon.StepBackwardOutlined"></path></svg>
	<p class="desc">实底风格：</p>
	<svg viewBox="0 0 1024 1024" width="80" height="20"><path :d="obj_icon.UpCircleFilled"></path></svg>
	<p class="desc">双色风格：</p>
	<svg focusable="false" data-icon="up-circle" width="6em" height="2em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm178 479h-46.9c-10.2 0-19.9-4.9-25.9-13.2L512 460.4 406.8 605.8c-6 8.3-15.6 13.2-25.9 13.2H334c-6.5 0-10.3-7.4-6.5-12.7l178-246c3.2-4.4 9.7-4.4 12.9 0l178 246c3.9 5.3.1 12.7-6.4 12.7z" fill="#e6f7ff"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#1890ff"></path><path d="M518.4 360.3a7.95 7.95 0 00-12.9 0l-178 246c-3.8 5.3 0 12.7 6.5 12.7h46.9c10.3 0 19.9-4.9 25.9-13.2L512 460.4l105.2 145.4c6 8.3 15.7 13.2 25.9 13.2H690c6.5 0 10.3-7.4 6.4-12.7l-178-246z" fill="#1890ff"></path></svg>
	<svg width="2em" height="2em" viewBox="64 64 896 896">
		<path :d="obj_icon_two.UpCircleTwoTone.d1" :fill="obj_icon_two.UpCircleTwoTone.c1"></path>
		<path :d="obj_icon_two.UpCircleTwoTone.d2" :fill="obj_icon_two.UpCircleTwoTone.c2"></path>
		<path :d="obj_icon_two.UpCircleTwoTone.d3" :fill="obj_icon_two.UpCircleTwoTone.c3"></path>
	</svg>
	
	<a-divider class="a-divi" orientation="left">阿里图标库</a-divider><!-- =============================================================== -->
	<p class="desc">阿里图标库：https://www.iconfont.cn/</p>
	
	<svg t="1718782527701" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="1508" width="80" height="20"><path d="M512 0c282.773333 0 512 229.226667 512 512S794.773333 1024 512 1024 0 794.773333 0 512 229.226667 0 512 0m228.096 465.408H321.173333a41.898667 41.898667 0 0 0 0 83.818667h418.922667a41.877333 41.877333 0 0 0 0-83.776" p-id="1509"></path></svg>
	<svg t="1718783049183" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="1178" width="80" height="20"><path d="M153.6 307.2a51.2 51.2 0 0 1 51.2 51.2v614.4A51.2 51.2 0 0 1 153.6 1024H51.2A51.2 51.2 0 0 1 0 972.8V358.4a51.2 51.2 0 0 1 51.2-51.2z m274.688 307.2a51.2 51.2 0 0 1 51.2 51.2v307.2a51.2 51.2 0 0 1-51.2 51.2h-102.4a51.2 51.2 0 0 1-51.2-51.2V665.6a51.2 51.2 0 0 1 51.2-51.2zM701.290667 0a51.2 51.2 0 0 1 51.2 51.2v921.6a51.2 51.2 0 0 1-51.2 51.2h-102.4a51.2 51.2 0 0 1-51.2-51.2V51.2a51.2 51.2 0 0 1 51.2-51.2zM972.8 0A51.2 51.2 0 0 1 1024 51.2v921.6a51.2 51.2 0 0 1-51.2 51.2h-102.4a51.2 51.2 0 0 1-51.2-51.2V51.2A51.2 51.2 0 0 1 870.4 0z" p-id="1179"></path></svg>
	
	<div class="h30"></div>
	<p class="desc">可以精简成这样：</p>
	<svg viewBox="0 0 1024 1024" width="80" height="20">
		<path d="M512 0c282.773333 0 512 229.226667 512 512S794.773333 1024 512 1024 0 794.773333 0 512 229.226667 0 512 0m228.096 465.408H321.173333a41.898667 41.898667 0 0 0 0 83.818667h418.922667a41.877333 41.877333 0 0 0 0-83.776"></path>
	</svg>
	
	<div class="h30"></div>
	<p class="desc">最后成这样：</p>
	<svg viewBox="0 0 1024 1024" width="80" height="20">
		<path :d="obj_icon.jin"></path>
	</svg>
	
	<div class="h30"></div>
	<p class="desc">即：（按照这个思路，就可以组建自己的icon库）</p>
	<svg viewBox="0 0 1024 1024" width="80" height="20"><path :d="obj_icon.jin"></path></svg>
	
	<div class="h30"></div>
	<p class="desc">另：</p>
	<svg viewBox="0 0 1024 1024" width="80" height="20"><path :d="obj_icon.right" fill="red"></path></svg>
	<svg viewBox="0 0 1024 1024" width="80" height="20"><path :d="obj_icon.right" fill="#11da20"></path></svg>
	<svg viewBox="0 0 1024 1024" width="80" height="20"><path :d="obj_icon.github"></path></svg>
	
	
</div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		obj_icon: {
			'jin': "M512 0c282.773333 0 512 229.226667 512 512S794.773333 1024 512 1024 0 794.773333 0 512 229.226667 0 512 0m228.096 465.408H321.173333a41.898667 41.898667 0 0 0 0 83.818667h418.922667a41.877333 41.877333 0 0 0 0-83.776",
			'right': 'M512 0c282.773333 0 512 229.226667 512 512S794.773333 1024 512 1024 0 794.773333 0 512 229.226667 0 512 0m252.010667 337.066667a34.773333 34.773333 0 0 0-49.301334 2.688l-225.92 252.522666-144.981333-155.136a34.922667 34.922667 0 1 0-50.986667 47.68l171.008 183.04a34.773333 34.773333 0 0 0 51.541334-0.512l251.392-281.045333a34.773333 34.773333 0 0 0-2.773334-49.258667',
			'github': 'M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z',
			
			'StepBackwardOutlined': 'M347.6 528.95l383.2 301.02c14.25 11.2 35.2 1.1 35.2-16.95V210.97c0-18.05-20.95-28.14-35.2-16.94L347.6 495.05a21.53 21.53 0 000 33.9M330 864h-64a8 8 0 01-8-8V168a8 8 0 018-8h64a8 8 0 018 8v688a8 8 0 01-8 8',
			'UpCircleFilled': 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm178 555h-46.9c-10.2 0-19.9-4.9-25.9-13.2L512 460.4 406.8 605.8c-6 8.3-15.6 13.2-25.9 13.2H334c-6.5 0-10.3-7.4-6.5-12.7l178-246c3.2-4.4 9.7-4.4 12.9 0l178 246c3.9 5.3.1 12.7-6.4 12.7z',
			
		},
		obj_icon_two: {
			'UpCircleTwoTone': {
				'd1': 'M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm178 479h-46.9c-10.2 0-19.9-4.9-25.9-13.2L512 460.4 406.8 605.8c-6 8.3-15.6 13.2-25.9 13.2H334c-6.5 0-10.3-7.4-6.5-12.7l178-246c3.2-4.4 9.7-4.4 12.9 0l178 246c3.9 5.3.1 12.7-6.4 12.7z',
				'c1': '#e6f7ff',
				'd2': 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z',
				'c2': '#1890ff',
				'd3': 'M518.4 360.3a7.95 7.95 0 00-12.9 0l-178 246c-3.8 5.3 0 12.7 6.5 12.7h46.9c10.3 0 19.9-4.9 25.9-13.2L512 460.4l105.2 145.4c6 8.3 15.7 13.2 25.9 13.2H690c6.5 0 10.3-7.4 6.4-12.7l-178-246z',
				'c3': '#1890ff',
			},
		}
	}
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	
}
}

const app = Vue.createApp(Main);
app.use(antd);
let vm = app.mount("#app");

</script>
</html>
